<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @submit.native.prevent
    >
      <el-form-item label="用户预约查询">
        <el-input
          placeholder="请输入姓名查询预约记录"
          prefix-icon="el-icon-search"
          v-model="formInline.title"
          @keyup.enter.native="getRegistration"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleCreate">新增</el-button>
        <!-- <el-button type="primary" @click="getClinic" >查询</el-button> -->
      </el-form-item>
    </el-form>

    <el-table :data="registrationData" style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        :index="indexMethod"
        width="120"
      >
      </el-table-column>
      <el-table-column prop="userName" label="姓名"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="phone" label="联系方式"> </el-table-column>
      <el-table-column prop="clinic_title" label="诊疗项目"> </el-table-column>

      <el-table-column label="预约时间">
        <template slot-scope="scope">
          <span>{{ moment(scope.row.date).format(`YYYY年MM月DD日`) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="病情描述"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹框 -->
    <el-dialog width="35%" :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="诊疗项目" :label-width="formLabelWidth">
          <el-select v-model="form.clinic_title" placeholder="请选择诊疗项目">
            <el-option
              v-for="item in clinicList"
              :key="item.clinic_id"
              :label="item.clinic_title"
              :value="item.clinic_title"
            ></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>

            <el-form-item id="regDate" label="预约时间"
            :label-width="formLabelWidth">
            <div class="block">
              <el-date-picker
                v-model="form.date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </el-form-item>
        

        <el-form-item label="病情描述" :label-width="formLabelWidth">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"  @click="dialogTitle=='修改用户预约信息'?submitEdit():submitAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        title: "", //查询关键字
      },
      form: {
        //弹框数据
        reg_id: "",
        userName: "",
        age: "",
        phone: "",
        clinic_title: "",
        date: "",
        description: "",
      },
      registrationData: [], //预约数据
      clinicList: [], //诊疗项目列表
      dialogFormVisible: false, //可视窗关闭
      dialogTitle:'',//可视窗标题
      formLabelWidth: "120px",
    };
  },
  mounted() {
    this.getRegistration();
    this.getClinicList();
  },
  methods: {
    getRegistration() {
      let kw = "";
      if (this.formInline.title != "") {
        kw = "?userName=" + this.formInline.title;
      }
      let url = `/registration/examine${kw}`;
      this.axios.get(url).then((res) => {
        this.registrationData = res.data.data;
        console.log(res);
      });
    },
    getClinicList() {
      let url = `/clinic/project`;
      this.axios.get(url).then((res) => {
        this.clinicList = res.data;
      });
    },
    submitEdit() {
      this.dialogFormVisible = false;
      let url = `/registration/updateReg`;
      let params = this.form;
      this.axios.post(url, params).then((res) => {
        this.getRegistration();
      });
    },
    submitAdd(){
         this.dialogFormVisible = false;
         let url = `/registration/addReg`;
      let params = this.form;
      this.axios.post(url, params).then((res) => {
        console.log(params);
        this.getRegistration();
      });
      this.form = {};
    },
    indexMethod(index) {
      return index++ + 1;
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogTitle='修改用户预约信息'
      this.form = {
        reg_id: row.reg_id,
        userName: row.userName,
        age: row.age,
        phone: row.phone,
        clinic_title: row.clinic_title,
        date: row.date,
        description: row.description,
      };
      this.dialogFormVisible = true;
    },
     handleCreate(){
      this.dialogTitle='新增用户预约信息'
      this.dialogFormVisible = true;
      this.form={}
    },
    handleDelete(index, row) {
      console.log(index, row);
      let url = `/registration/${row.reg_id}`;
      this.axios.get(url).then((res) => {
        this.getRegistration();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>